<template>
<div class="rainbow">
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
  <div class="line line-4"></div>
  <div class="line line-5"></div>
  <div class="line line-6"></div>
  <div class="line line-7"></div>
  <div class="line line-8"></div>
  <div class="line line-9"></div>
  <div class="line line-10"></div>
  <div class="line line-11"></div>
  <div class="line line-12"></div>
  <div class="line line-13"></div>
  <div class="line line-14"></div>
  <div class="line line-15"></div>
  <div class="line line-16"></div>
  <div class="line line-17"></div>
  <div class="line line-18"></div>
  <div class="line line-19"></div>
  <div class="dot"></div>
</div>

</template>

<script>

export default {
 
  
    data() {
      return {
        

      };
    },
    
   
    created() {
      
    },
    mounted() {
      
    },
    

    methods:{

    },
}
</script>
<style lang="scss" scoped>

.rainbow {
  height: 200px;
  overflow: hidden;
//   position: relative;
  width: 150px;
}

.dot {
  background-color: #82c545;
  border-radius: 50%;
  bottom: 0;
  height: 30px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 50%);
  width: 30px;
}

.line {
  border-radius: 50%;
  border-style: solid;
  border-width: 50px;
  bottom: 0;
  position: absolute;
  left: 50%;
}

.line-1 {
  border-color: #5d3191 #5d3191 transparent transparent;
}

.line-2 {
  border-color: #c12680 #c12680 transparent transparent;
}

.line-3 {
  border-color: #ed2861 #ed2861 transparent transparent;
}

.line-4 {
  border-color: #f06045 #f06045 transparent transparent;
}

.line-5 {
  border-color: #f8b739 #f8b739 transparent transparent;
}

.line-6 {
  border-color: #82c545 #82c545 transparent transparent;
}

.line-7 {
  border-color: #18a39b #18a39b transparent transparent;
}

.line-8 {
  border-color: #2172b8 #2172b8 transparent transparent;
}

.line-9 {
  border-color: #5d3191 #5d3191 transparent transparent;
}

.line-10 {
  border-color: #c12680 #c12680 transparent transparent;
}

.line-11 {
  border-color: #ed2861 #ed2861 transparent transparent;
}

.line-12 {
  border-color: #f06045 #f06045 transparent transparent;
}

.line-13 {
  border-color: #f8b739 #f8b739 transparent transparent;
}

.line-14 {
  border-color: #82c545 #82c545 transparent transparent;
}

.line-15 {
  border-color: #18a39b #18a39b transparent transparent;
}



.line-17 {
  border-color: #c12680 #c12680 transparent transparent;
}

.line-18 {
  border-color: #ed2861 #ed2861 transparent transparent;
}

.line-16 {
  border-color: #f06045 #f06045 transparent transparent;
}
.line-19 {
  border-color: #545c64 #545c64 transparent transparent;
}

.line-1 {
  -webkit-animation: rotate 2.5s ease-in-out -0.1s infinite;
          animation: rotate 2.5s ease-in-out -0.1s infinite;
  padding-top: 4.7368421053%;
  width: 4.7368421053%;
}

.line-2 {
  -webkit-animation: rotate 2.5s ease-in-out -0.2s infinite;
          animation: rotate 2.5s ease-in-out -0.2s infinite;
  padding-top: 9.4736842105%;
  width: 9.4736842105%;
}

.line-3 {
  -webkit-animation: rotate 2.5s ease-in-out -0.3s infinite;
          animation: rotate 2.5s ease-in-out -0.3s infinite;
  padding-top: 14.2105263158%;
  width: 14.2105263158%;
}

.line-4 {
  -webkit-animation: rotate 2.5s ease-in-out -0.4s infinite;
          animation: rotate 2.5s ease-in-out -0.4s infinite;
  padding-top: 18.9473684211%;
  width: 18.9473684211%;
}

.line-5 {
  -webkit-animation: rotate 2.5s ease-in-out -0.5s infinite;
          animation: rotate 2.5s ease-in-out -0.5s infinite;
  padding-top: 23.6842105263%;
  width: 23.6842105263%;
}

.line-6 {
  -webkit-animation: rotate 2.5s ease-in-out -0.6s infinite;
          animation: rotate 2.5s ease-in-out -0.6s infinite;
  padding-top: 28.4210526316%;
  width: 28.4210526316%;
}

.line-7 {
  -webkit-animation: rotate 2.5s ease-in-out -0.7s infinite;
          animation: rotate 2.5s ease-in-out -0.7s infinite;
  padding-top: 33.1578947368%;
  width: 33.1578947368%;
}

.line-8 {
  -webkit-animation: rotate 2.5s ease-in-out -0.8s infinite;
          animation: rotate 2.5s ease-in-out -0.8s infinite;
  padding-top: 37.8947368421%;
  width: 37.8947368421%;
}

.line-9 {
  -webkit-animation: rotate 2.5s ease-in-out -0.9s infinite;
          animation: rotate 2.5s ease-in-out -0.9s infinite;
  padding-top: 42.6315789474%;
  width: 42.6315789474%;
}

.line-10 {
  -webkit-animation: rotate 2.5s ease-in-out -1s infinite;
          animation: rotate 2.5s ease-in-out -1s infinite;
  padding-top: 47.3684210526%;
  width: 47.3684210526%;
}

.line-11 {
  -webkit-animation: rotate 2.5s ease-in-out -1.1s infinite;
          animation: rotate 2.5s ease-in-out -1.1s infinite;
  padding-top: 52.1052631579%;
  width: 52.1052631579%;
}

.line-12 {
  -webkit-animation: rotate 2.5s ease-in-out -1.2s infinite;
          animation: rotate 2.5s ease-in-out -1.2s infinite;
  padding-top: 56.8421052632%;
  width: 56.8421052632%;
}

.line-13 {
  -webkit-animation: rotate 2.5s ease-in-out -1.3s infinite;
          animation: rotate 2.5s ease-in-out -1.3s infinite;
  padding-top: 61.5789473684%;
  width: 61.5789473684%;
}

.line-14 {
  -webkit-animation: rotate 2.5s ease-in-out -1.4s infinite;
          animation: rotate 2.5s ease-in-out -1.4s infinite;
  padding-top: 66.3157894737%;
  width: 66.3157894737%;
}

.line-15 {
  -webkit-animation: rotate 2.5s ease-in-out -1.5s infinite;
          animation: rotate 2.5s ease-in-out -1.5s infinite;
  padding-top: 71.0526315789%;
  width: 71.0526315789%;
}

.line-16 {
  -webkit-animation: rotate 2.5s ease-in-out -1.6s infinite;
          animation: rotate 2.5s ease-in-out -1.6s infinite;
  padding-top: 75.7894736842%;
  width: 75.7894736842%;
}

.line-17 {
  -webkit-animation: rotate 2.5s ease-in-out -1.7s infinite;
          animation: rotate 2.5s ease-in-out -1.7s infinite;
  padding-top: 80.5263157895%;
  width: 80.5263157895%;
}

.line-18 {
  -webkit-animation: rotate 2.5s ease-in-out -1.8s infinite;
          animation: rotate 2.5s ease-in-out -1.8s infinite;
  padding-top: 85.2631578947%;
  width: 85.2631578947%;
}

.line-19 {
  -webkit-animation: rotate 2.5s ease-in-out -1.9s infinite;
          animation: rotate 2.5s ease-in-out -1.9s infinite;
  padding-top: 90%;
  width: 90%;
}

@-webkit-keyframes rotate {
  0% {
    transform: translate(-50%, 50%) rotate(-45deg);
  }
  50% {
    transform: translate(-50%, 50%) rotate(-225deg);
  }
  100% {
    transform: translate(-50%, 50%) rotate(-45deg);
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, 50%) rotate(-45deg);
  }
  50% {
    transform: translate(-50%, 50%) rotate(-225deg);
  }
  100% {
    transform: translate(-50%, 50%) rotate(-45deg);
  }
}
</style>